<?php 
require_once "../config.php";
require_once "../function.php";
//调用已经封装好的
 ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Categories &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
      <?php include_once "public/navbar.php" ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <div class="alert alert-danger" style="display: none;">
        <strong>错误！</strong><span id="msg"></span>
      </div>
      <div class="row">
        <div class="col-md-4">
          <form id="data">
            <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
            <label for="slug">类名</label>
            <input id="classname" class="form-control" name="classname" type="text" placeholder="类名">
                  <p class="help-block">https://zce.me/category/<strong>类名</strong></p>
</div>
            <div class="form-group">
              <input type="button" id="btn-add" class="btn btn-primary" value="添加">
              <button id="btn-edit" class="btn btn-primary" type="button" style="display: none;">编辑完成</button>
              <button id="btn-cancel" class="btn btn-primary" type="button" style="display: none;">取消编辑</button>

            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a id="delAll" class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox"></th>
                <th>名称</th>
                <th>Slug</th>
                <th>类名</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
<?php 
  // 需要声明一个$current_page变量。告知当前是哪个页面，以便aside.php处理是否展开
     $current_page = 'categories';

   ?>
 <!-- //这左部的公共模块 -->
  <?php include_once "public/aside.php" ?>


  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
  <script>
$(function(){
  //发送请求动态生成数据列表
$.ajax({
    type:"POST",
    url : "api/_getCategoryData.php",
    success:function(res){
      if (res.code ==1) {
       //动态渲染
       //便利数组
       var str ="";
       var data = res.data;
       $.each(data,function(i,e){
           str +=`<tr data-categoryid="${e.id}">
                <td class="text-center"><input type="checkbox"></td>
                <td>${e.name}</td>
                <td>${e.slug}</td>
                <td>${e.classname}</td>
                <td class="text-center">
                  <a href="javascript:;" class="btn btn-info btn-xs edit" data-categoryid="${e.id}">编辑</a>
                  <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
                </td>
              </tr>`;
       })
        $(str).appendTo("tbody");
      }
    }
})
//点击添加按钮添加分类数据
$("#btn-add").on("click",function(){
        // 1 收集表单数据 - 验证表单数据是否添加完整
        var name = $("#name").val();
        var slug = $("#slug").val();
        var classname = $("#classname").val();
        // 如果数据填写不完整，就提示用户要填写完整才能添加
        if( name == ""){
          $("#msg").text("分类名称不能为空");
          $(".alert").show();
          return;
        }
        if( slug == ""){
          $("#msg").text("分类别名不能为空");
          $(".alert").show();
          return;
        }
        if( classname == ""){
          $("#msg").text("分类的类名不能为空");
          $(".alert").show();
          return;
 }
//发送请求到服务器上
$.ajax({
          url : "api/_addCategory.php",
          data : $("#data").serialize(),
          type : "POST",
          success : function(res){
            //根据返回的结果，动态生成一行数据追加到表格的末尾即可
            if( res.code == 1){
              //  返回成功，则动态更新表格结构（添加一行）
              var str = "";
              str += `<tr>
                <td class="text-center"><input type="checkbox"></td>
                <td>${name}</td>
                <td>${slug}</td>
                <td>${classname}</td>
                <td class="text-center">
                  <a href="javascript:;" class="btn btn-info btn-xs edit">编辑</a>
                  <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
                </td>
              </tr>`;
              $(str).appendTo("tbody");
            }
          }
        });
      });
     var  currentRow = null;
     //编辑操作
$("tbody").on("click",".edit",function(){
  //点击事件处理程序的代码
  //现获取点击按钮对应的数据的id
  var categoryId = $(this).attr("data-categoryid");
  //把对应的id存储到编辑完成的按钮身上
  //attr() 方法设置或返回被选元素的属性值。
  $("#btn-edit").attr("data-categoryid",categoryId);
  currentRow = $(this).parents("tr"); 
  //先在这里吧添加按钮隐藏，吧编辑完成和取消的编辑的按钮显示出来
  $("#btn-add").hide();
  $("#btn-edit").show();
  $("#btn-cancel").show();
  //把点击的按钮对应的数据填充到对应的输入框
  var name = $(this).parents("tr").children().eq(1).text();
  var slug= $(this).parents("tr").children().eq(2).text();
  var classname = $(this).parents("tr").children().eq(3).text();
  //把获取到额内容填充到对应的输入框内
  $("#name").val(name);
  $("#slug").val(slug);
  $("#classname").val(classname);
})
   $("#btn-edit").on("click",function(){
   //1.收集表单数据是否填写完整
   var categoryId = $(this).attr("data-categoryid");
   var name = $("#name").val();
   var slug = $("#slug").val();
   var classname = $("#classname").val();
   //如果数据填写不完整，则提示用户
   if(name == ""){
    // 提示用户分类的名称不能为空
    $("#msg").text("分类的名称不能为空");
    $(".alert").show();
    return;
  }
  if(slug == ""){
    // 提示用户分类的别名不能为空
    $("#msg").text("分类的别名不能为空");
    $(".alert").show();
    return;
  }
  if(classname == ""){
    // 提示用户分类的图标样式不能为空
    $("#msg").text("分类的图标样式不能为空");
    $(".alert").show();
    return;
  }
//ajax进行提交
$.ajax({
  type:"POST",
  url:"api/_updateCategory.php",
  data:{name : name , slug : slug , classname : classname , id : categoryId},
  success:function(res){
    //r如果修改成功
    if (res.code == 1) {
   //要把两个编辑按钮隐藏，要把添加按钮显示
    $("#btn-add").show();
    $("#btn-edit").hide();
    $("#btn-cancel").hide();
     //清空之前先保存修改过之后的内容
     var name = $("#name").val();
      var slug = $("#slug").val();
     var classname = $("#classname").val();
//清空输入框
       $("#name").val("");
       $("#slug").val("");
       $("#classname").val("");
       //把对应的数据更新到表格中
      currentRow.children().eq(1).text(name);
      currentRow.children().eq(2).text(slug); 
      currentRow.children().eq(3).text(classname);
    }
  }
})
    });
   //取消编辑
   $(".btn-cancel").on("click",function(){
    //把对应的按钮隐藏和显示
    $("#btn-add").show();
    $("#btn-edit").hide();
    $("#btn-cancel").hide();
    //清除输入框
    $("#name").val("");
    $("#slug").val("");
    $("#classname").val("");

   });

//进行删除操作
$("tbody").on("click",".del",function(){
   //先把当前点击的行记录下来，当删除成功的时候，我们就把这一行删掉即可
   var row = $(this).parents("tr");
   //根据当前点击的按钮对应的行，得到起对应的id,在数据库中删除数据
   //首先获取要删除的数据的id 
   var categoryId = row.attr("data-categoryid");
   //把要删除的id发回服务器
   $.ajax({
  type:"POST",
  url:"api/_delCategory.php",
  data:{id:categoryId},
  success :function(res){
    console.log(res);
    //如果删除成功，也要把对应的行删除
    if(res.code ==1){
      //要把对应的行删掉
      row.remove();
    }
  }
   })
})
$("tbody").on("click","input",function(){
  //控制全选的多选框是否选中，只有当所有的多选框选中，全选才选中
  //获取全选多选框
  var all = $("thead input");
  var cks = $("tbody input");
  //如果cks里面的所有的多选框都选中了，全选也选中
  all.prop("checked",cks.size() === $("tbody input:checked").size());
  //选中的多选框超过两个，就显示批量删除
  if($("tbody input:checked").size() >= 2){
    $("#delAll").show();
  }else{
    $("#delAll").hide();
  }
});
//点击批量删除的实现
$("#delAll").on("click",function(){
//准备好的收集多个id的数组
var ids = [];
//收集所有的选中的id 发送到服务器进行数据的删除
var  cks = $("tbody input:checked");
//遍历伪数组，找到所有被选中的id；
cks.each(function(index,el){
  var id = $(el).parents("tr").attr("data-categoryid");
  ids.push(id);
  //把数据发回服务器
  $.ajax({
    url:"api/_delCategoriese.php",
    type:"POST",
    data:{ids : ids},
    success :function(res){
      //如果删除成功了，要把对应的行也移除掉
      if(res.code == 1){
        cks.parents("tr").remove();
      }
    }
  })
});
});
 });
  </script>
</body>
</html>
